<template>
  <el-menu-item index="21" @click="dialogShow">上报路况</el-menu-item>

  <el-dialog v-model="result" width="50%" draggable>
    <h2>上报路况</h2>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" width="50%">
      <el-form-item label="事件类型:" prop="event_type">
        <el-select v-model="form.event_type" placeholder="请选择事故类型">
          <el-option label="碰撞" value="碰撞" />
          <el-option label="刮擦" value="刮擦" />
          <el-option label="失火" value="失火" />
          <el-option label="翻车" value="翻车" />
          <el-option label="碾压" value="碾压" />
        </el-select>
      </el-form-item>
      <el-form-item label="事件地址" prop="event_addr">
        <el-input v-model="form.event_addr" />
      </el-form-item>
      <el-form-item label="建筑标识" prop="event_mark">
        <el-input v-model="form.event_mark" />
      </el-form-item>
      <el-form-item label="事件描述" prop="event_describe">
        <el-input v-model="form.event_describe" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="result = false">取消</el-button>
        <el-button type="primary" @click="reportTraffic(ruleFormRef)">
          上报路况
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { addEventHttp } from "../../../request/api/event"
var result = ref(false) //判断弹窗显隐

const $route = useRoute()
const res = $route.query

//表单校验
//ref="ruleFormRef"
const ruleFormRef = ref()

//表单校验
//:rules="rules"
const rules = ref({
  event_type: [
    {
      required: true,
      message: "事件类型不能为空",
      tigger: "blur",
    },
  ],
  event_addr: [
    {
      required: true,
      message: "事件地址不能为空",
      tigger: "blur",
    },
  ],
  event_mark: [
    {
      required: true,
      message: "建筑标识不能为空",
      tigger: "blur",
    },
  ],
  event_describe: [
    {
      required: true,
      message: "事件描述不能为空",
      tigger: "change",
    },
  ],
})

const form = reactive({
  event_type: "",
  event_addr: "",
  event_mark: "",
  event_describe: "",
  event_status: 0,
})
const dialogShow = () => {
  form.event_type = ""
  form.event_addr = ""
  form.event_mark = ""
  form.event_describe = ""
  result.value = true
}
const reportTraffic = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      addEventHttp(
        res.id,
        form.event_type,
        form.event_addr,
        form.event_mark,
        form.event_describe,
        form.event_status,
        res.name
      ).then((res) => {
        ElMessage({
          message: "事件上报成功",
          type: "success",
        })
        result.value = false
      })
    } else {
      ElMessage({
        message: "事件上报失败",
        type: "warning",
      })
    }
  })
}
</script>

<style scoped></style>
